<template>

    <div>
        <el-row>
            <el-col :span="14">
                <div class="font">|重置密码</div>
                <div class="grid-content bg-purple-dark"></div>
            </el-col>
        </el-row>

        <div class="container">
            <el-card class="box-card ">
                <el-form
                        ref="ruleForm"
                        :model="ruleForm"
                        status-icon
                        :rules="rules"
                        label-width="120px"
                        class="demo-ruleForm"
                >

                    <el-row type="flex" justify="center" class="el-row">
                        <el-col :span="20">
                            <el-form-item label="当前密码：" prop="oldPass">
                                <el-input class="myinput"
                                          v-model="ruleForm.oldPass"
                                          type="password"
                                          autocomplete="on"
                                ></el-input>
                            </el-form-item>
                            <div class="grid-content bg-purple"></div>
                        </el-col>
                    </el-row>


                    <el-row type="flex" justify="center" class="el-row">
                        <el-col :span="20">
                            <el-form-item class="myinput" label="新密码：" prop="pass">
                                <el-input class="myinput"
                                          v-model="ruleForm.pass"
                                          type="password"
                                          autocomplete="off"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row type="flex" justify="center" class="el-row">
                        <el-col :span="20">
                            <el-form-item label="确认密码：" prop="checkPass">
                                <el-input class="myinput"
                                          v-model="ruleForm.checkPass"
                                          type="password"
                                          autocomplete="off"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row type="flex" justify="center" class="el-row">
                        <el-col :span="10">
                            <el-form-item>
                                <el-button style="width:130px;margin-left: 20px" type="warning" @click="submitForm('ruleForm')">重置</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item>
                                <el-button style="width:130px;" type="primary" @click="resetForm('ruleForm') ">取消</el-button>
                            </el-form-item>
                        </el-col>

                    </el-row>

                </el-form>
            </el-card>
        </div>
    </div>

</template>

<script>
    import user from "@/api/user/user";

    export default {
        data() {
            const validateCheckPass = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入确认密码"));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error("两次输入密码不一致！"));
                } else {
                    callback();
                }
            };
            const validPassword = (rule, value, callback) => {
                let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
                if (!reg.test(value)) {
                    callback(new Error('密码必须是由8-20位字母+数字组合'))
                } else {
                    callback()
                }
            }

            return {
                ruleForm: {
                    oldPass: "",
                    pass: '',
                    checkPass: '',
                },
                rules: {
                    pass: [
                        {required: true, message: "请输入密码", trigger: "blur"},
                        {validator: validPassword, trigger: "blur"}
                    ],
                    checkPass: [
                        {required: true, message: "请输入确认密码", trigger: "blur"},
                        {validator: validateCheckPass, trigger: "blur"}],
                },
            }
        },
        methods: {

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm("确认要重置密码？", "提示", {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            user.updatePassword(3, this.ruleForm.oldPass, this.ruleForm.pass).then(
                                (response) => {
                                    this.$message({
                                        type: 'success',
                                        message: '重置成功!'
                                    })
                                    // 重置成功后跳转到的登录页面
                                    this.$router.push({name: 'UserLogin', params: {email: this.user.email}})
                                }).catch((response => {
                                this.$message({
                                    type: 'info',
                                    message: '密码错误',
                                })
                            }))
                        })
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields()
            },
        },
    }
</script>
<style>
    .demo-ruleForm {
        width: 60%;
        margin-left: 130px;
    }

    .box-card {
        --el-card-padding: 100px;
    }

    .font {
        color: #01A7F0;
        font-size: 25px;
        font-weight: bold;
    }

    .container {
        margin: 30px;
    }

</style>
